<template>
  <el-pagination v-model:currentPage="page.page" :page-sizes="[15, 25, 50, 100]" v-model:page-size="page.page_size"
    background layout="total, prev, pager, next, sizes" :total="page.total" @size-change="handleSizeChange"
    @current-change="handleCurrentChange">
  </el-pagination>
</template>
<script lang="ts" setup>
import { store } from '@/store'
import { ref, reactive, computed, watch } from 'vue'
import bus from '@/utils/bus'
const emit = defineEmits(['submit'])
let initPage = ref(false)
// 总数量
const pageTotal = computed(() => {
  return store.getters['pageTotal']
})
const page = reactive({
  page: 1,
  page_size: 15,
  total: pageTotal
})
const pageInit = () => {
  page.page = 1
  page.page_size = 15
}
const initPageFun = () => {
  page.value = {
    page: 1,
    page_size: 15,
    total: pageTotal
  }
}
initPageFun()

watch(initPage, (val) => {
  if (val) {
    initPageFun()
    initPage.value = false
  }
})
const handleSizeChange = (val: number) => {
  page.page_size = val
  emit('submit', page)
  console.log(`${val} 每页显示多少条`)
}
const handleCurrentChange = (val: number) => {
  page.page = val
  emit('submit', page)
  // bus.emit('getImagesList')
  console.log(`当前页: ${val}`)
}

defineExpose({
  initPage,
  pageInit
})
</script>
